<template>
    <div class="contact-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="800px">
            <el-form :model="state.contactInfo" size="default" label-width="140px">
                <el-row :gutter="25">

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="姓名">
                            <el-input v-model="state.contactInfo.name" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="手机号">
                            <el-input v-model="state.contactInfo.phoneNum" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="邮箱">
                            <el-input v-model="state.contactInfo.email" clearable></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">取 消</el-button>
                    <el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="contactDialog">
import { reactive, ref } from 'vue';
import { useContactApi } from '/@/api/mainData/contact';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const state = reactive({
    contactInfo: {
        id: '',
        name: '',
        phoneNum: '',
        email: '',
        type: 1,
        bizId: 0,
    },
    dialog: {
        isShowDialog: false,
        type: '',
        title: '',
        submitTxt: '',
    },
});

// 引入 api 请求接口
const contactApi = useContactApi();

// 打开弹窗
async function openDialog(operateType: string, type: number, bizId: number, contactId?: number) {
    state.contactInfo.type = type;
    state.contactInfo.bizId = bizId;
    if (operateType === 'edit') {
        const param = {
            id: contactId,
            type: type,
            bizId: bizId,
        }
        const result = await contactApi.contactDetail(param);
        if (result.data == null)
            return Promise.resolve(true);

        const contactDetail: Contact = result.data;
        state.contactInfo = contactDetail;

        state.dialog.title = '修改联系人';
        state.dialog.submitTxt = '修 改';
    } else {
        state.dialog.title = '新增联系人';
        state.dialog.submitTxt = '新 增';
        clearContactInfo();
    }
    state.dialog.type = operateType;
    state.dialog.isShowDialog = true;
};

// 清除表单信息
const clearContactInfo = () => {
    state.contactInfo.id = '';
    state.contactInfo.name = '';
    state.contactInfo.phoneNum = '';
    state.contactInfo.email = '';
}

// 关闭弹窗
const closeDialog = () => {
    state.dialog.isShowDialog = false;
};

// 取消
const onCancel = () => {
    closeDialog();
};

// 提交
async function onSubmit() {
    await contactApi.editContact(state.contactInfo);
    closeDialog(); // 关闭弹窗
    emit('refresh');
};

// 暴露变量
defineExpose({
    openDialog,
});
</script>